<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="/css/anjuke.css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
</head>
<body>
	<div class="header">
		<div class="nav-search">
			<a href="#" ><img src="/img/logo.svg" class="logo"></a>
			<div class="search-left">
				<ul class="ul-top">
					<li style="margin-left: 10px">首页</li>
					<span class="span-line"></span>
					<li>新房</li>
					<span class="span-line"></span>
					<li>二手房</li>
					<span class="span-line"></span>
					<li>租房</li>
					<span class="span-line"></span>
					<li>商品写字楼</li>
					<span class="span-line"></span>
					<li>海外地产</li>
					<span class="span-line"></span>
					<li>贷款</li>
					<span class="span-line"></span>
					<li>回答</li>
				</ul>
			</div>
			<div class="search-right">
				<ul class="ul-top">
					<li>
						<span>用户登录</span>
						<span class="login-logo"></span>					</li>
					<li><span class="span-line"></span>
						<a href="#" style="color: #666">
						<span class="glyphicon glyphicon-user" style="margin-right: 3px"></span>用户登录
						</a>
					</li>
					<li>
						<span style="margin-left: 10px;">注册</span>
					</li>
					<li>
						<a href="#" style="color: #666">
						<span class="glyphicon glyphicon-heart" style="margin-right: 3px;"></span>收藏夹

						</a>
						<span class="span-line"></span>
					</li>
				</ul>	
			</div>
		</div>
		<div class="nav-content">
			<ul class="content-ul">
				<li>安居客</li>
				<li>></li>
				<li>楼盘</li>
				<li>></li>
				<li>楼盘</li>
				<li>></li>
				<li>广汇 东湖城</li>
			</ul>
			<div class="search" style="float: right;">
				<div class="input-group">
			      <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
			      <span class="input-group-addon" id="basic-addon2">搜索</span>
    			</div>
			</div>
		</div>
		<div class="guanggao"><img src="https://pic4.ajkimg.com/display/xinfang/27049c3f01e93e6118f3ba27cb0ffe40/1180x160n.jpg" alt=""></div>
		<div class="nav-bottom">
			<ul class="bottom-ul">
				<a href="#"><li class="active-li">楼盘首页</li></a>
				<a href="#"><li>楼盘详情</li></a>
				<a href="#"><li>楼盘相册</li></a>
				<a href="#"><li>楼盘动态</li></a>
				<a href="#"><li>楼盘户型</li></a>
				<a href="#"><li>用户点评</li></a>
				<a href="#"><li>回答</li></a>
				<a href="#"><li>楼盘评测</li></a>
				<a href="#"><li>周边配套</li></a>
				<a href="#"><li>楼盘房源</li></a>
			</ul>
		</div>
	</div>

	<div class="content">
		 <div class="content-left">
			<div class="main-img">
				<img src="https://pic4.ajkimg.com/display/xinfang/5d4c3201f6b682fbb71f9cca0d56c930/600x450x98c.jpg">
			</div>
			<div class="sub-img" >
				<ul>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>
					<a href="#"><li><img src="https://pic4.ajkimg.com/display/xinfang/bbeaa4f413ff211d4e063ae7787fa3d5/90x65m.jpg"></li></a>

				</ul>
			</div>
		 </div>
		 <div class="content-right">
		 <!-- 在前台中设置后台传来的时间戳 -->
		 <%
			function time2date(t){
			let oDate=new Date(t*1000);
			return `${oDate.getFullYear()}年${oDate.getMonth()+1}月${oDate.getDate()}日`
			}
		 %>
			<h1><%=data.title-%></h1>
			<div class="sub-content">
				<div class="p-content"><span>价格</span><em><%=data.ave_price-%></em>元/㎡</div>
			</div>
			<div class="sub-content">
				<div class="p-content"><span>开盘</span><span class="content-word">开盘时间待定</span><%=time2date(data.sale_time)-%>s</div>
			</div>
			<div class="sub-content">
				<div class="p-content"><span>交房</span><span class="content-word">交房时间待定</span><%=time2date(data.submit_time)-%>s</div>
			</div>
			<div class="sub-content">
				<div class="p-content"><span>户型</span><span class="content-word"><%=data.property_types-%></span></div>
			</div>
			<div class="sub-content">
				<div class="p-content"><span>地址</span><span class="content-word"><%=data.position_main-%> <%=data.position_second-%></span></div>
			</div>
		 </div>
	</div>
	<div class="nav-broker">
		<h2>置业顾问</h2> 
		<div class="broker-content">

			<img src="https://pic1.ajkimg.com/display/xinfang/15daa07f98b8729c8f3d1eb1efd7488a/80x80m.jpg" class="name-img">
			<div style="display: inline-block;"><span class="span-name">美嘉</span></div>
		</div>
	</div>
	<!-- 设置户型图,把后台的图片放到前台(数组) -->
	<%
			let aPorpertyType;
			let aPorpertyImgPaths;
			if(data.property_types){
				aPorpertyType=data.property_types.split(',');
				aPorpertyImgPaths=data.property_img_paths.split(',');
			}else{
				aPorpertyType=[];
				aPorpertyImgPaths=[];
			}
		%>
	<% if(aPorpertyType.length>0){%>
	<div class="nav-broker nav-huxing">
		<h2>楼盘户型</h2> 
		
		<% aPorpertyType.forEach((item,i)=>{ %>

		<div class="huxing-content">
			<div class="huxing-div">
				<a href="#" class="huxing-a">
				<img src="<%= aPorpertyImgPaths[i] -%>" class="huxing-img"></a>
				<h4 class="span-huxing"> <%= item%></h4>
		<% })%>
			</div>
		</div>
	</div>
	<% }%>

	<div class="nav-broker nav-huxing">
		<h2>猜你喜欢</h2> 
		<div class="huxing-content">
			<div class="huxing-div">
				<a href="#" class="huxing-a">
				<img src="https://pic4.ajkimg.com/display/xinfang/5c73e06957383286442edd35f9511d43/212x175m.jpg" class="huxing-img"></a>
				<h4 class="span-huxing">120㎡户型 </h4>

			</div>
			<div class="huxing-div">
				<a href="#" class="huxing-a">
				<img src="https://pic4.ajkimg.com/display/xinfang/5c73e06957383286442edd35f9511d43/212x175m.jpg" class="huxing-img"></a>
				<h4 class="span-huxing">120㎡户型 </h4>

			</div>
			<div class="huxing-div">
				<a href="#" class="huxing-a">
				<img src="https://pic4.ajkimg.com/display/xinfang/5c73e06957383286442edd35f9511d43/212x175m.jpg" class="huxing-img"></a>
				<h4 class="span-huxing">120㎡户型 </h4>

			</div> 
		</div>
</div>
		<!-- 当没有坐标时，不显示百度地图 -->
		<% if(data.location){%>
		<div class="map-div"><div style="width:500px;height:430px;border:#ccc solid 1px;font-size:12px;margin-bottom:50px" id="map_div"></div></div>
		<% }%>
</body>
</html>
<%
	let [lng,lat]=data.location.split(',');
%>
 <script type="text/javascript">//在百度地图生成器中生成地图API
    //创建和初始化地图函数：
    function initMap(){
      createMap();//创建地图
      setMapEvent();//设置地图事件
      addMapControl();//向地图添加控件
      addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){ 
      map = new BMap.Map("map_div"); 
      map.centerAndZoom(new BMap.Point(<%=data.location-%>),16);
    }
    function setMapEvent(){
      map.enableScrollWheelZoom();
      map.enableKeyboard();
      map.enableDragging();
      map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
      target.addEventListener("click",function(){
        target.openInfoWindow(window);
      });
    }
    function addMapOverlay(){
      var markers = [
        {content:"<%=data.sub_title%>",title:"<%=data.title%>",imageOffset: {width:0,height:3},position:{lat:<%=lat-%>,lng:<%=lng-%>}}
      ];
      for(var index = 0; index < markers.length; index++ ){
        var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
        var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
          imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
        })});
        var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
        var opts = {
          width: 200,
          title: markers[index].title,
          enableMessage: false
        };
        var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
        marker.setLabel(label);
        addClickHandler(marker,infoWindow);
        map.addOverlay(marker);
      };
    }
    //向地图添加控件
    function addMapControl(){
      var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
      scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
      map.addControl(scaleControl);
      var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:1});
      map.addControl(navControl);
      var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
      map.addControl(overviewControl);
    }
    var map;
      initMap();
  </script>